/* GENERAL */

:root {
    background-color: #202020;
    color: #f1f1f1;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
        "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
    font-variation-settings: "wght" 350;
}

*:focus-visible {
    outline-width: 1px;
    outline-color: #51afef;
    outline-offset: 3px;
}

/* BACKGROUNDS */

.bg-default {
    background-color: #343434;
}

.bg-lighter {
    background-color: #404040;
}

.bg-darker {
    background-color: #1d1d1d;
}

/* AVATAR */

avatar {
    background-color: #343434;
}

avatar svg {
    fill: #181818;
}

/* BADGE */

badge {
    color: white;
    background-color: #0062ff;
}

badge svg {
    fill: #fafafa;
}

badge.success {
    background-color: #00ab14;
}

badge.warning {
    background-color: #ffaa00;
}

badge.error {
    background-color: #ff2d2d;
}

/* BUTTON  */

button {
    corner-radius: 4px;
    background-color: #343434;
    transition: background-color 100ms;
}

button:hover {
    background-color: #404040;
    transition: background-color 100ms;
}

button:active {
    background-color: #303030;
}

button.accent,
button-group.accent > button {
    background-color: #51afef;
    transition: background-color 100ms;
    color: #181818;
}

button.accent:hover,
button-group.accent > button:hover {
    background-color: #80caff;
    transition: background-color 100ms;
}

button.accent:active,
button-group.accent > button:active {
    background-color: #3995d6;
}

button.accent:disabled,
button-group.accent:disabled > button {
    border-width: 0px;
    background-color: #404040;
    border-color: #404040;
}

button.outline,
button-group.outline > button {
    background-color: transparent;
    border-width: 1px;
    border-color: #51afef;
    transition: background-color 100ms;
    color: #51afef;
}

button.outline:hover,
button-group.outline > button:hover {
    background-color: #80caff40;
    transition: background-color 100ms;
}

button.outline:active,
button-group.outline > button:active {
    background-color: #3995d610;
}

button.outline:disabled,
button-group.outline:disabled > button {
    border-color: #404040;
    background-color: #80caff00;
    color: #404040;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

button.text,
button-group.text > button {
    background-color: #80caff00;
    transition: background-color 100ms;
    color: #51afef;
}

button.text:hover,
button-group.text > button:hover {
    background-color: #80caff40;
    transition: background-color 100ms;
}

button.text:active,
button-group.text > button:active {
    background-color: #3995d610;
}

button.text:disabled,
button-group.text:disabled > button {
    background-color: #80caff00;
    color: #585858;
}

button:disabled {
    background-color: #404040;
    border-color: #404040;
    transition: background-color 100ms;
    transition: border-color 100ms;
    transition: color 100ms;
}

button svg {
    fill: #f1f1f1;
}

/* BUTTON GROUP */

button-group {
    gap: 1px;
}

button-group > button,
button-group > toggle-button {
    corner-radius: 0px;
}

button-group.vertical > button,
button-group.vertical > toggle-button {
    corner-radius: 0px;
}

button-group > :first-child {
    corner-top-left-radius: 4px;
    corner-bottom-left-radius: 4px;
}

button-group > :last-child {
    corner-top-right-radius: 4px;
    corner-bottom-right-radius: 4px;
}

button-group.vertical > :first-child {
    corner-radius: 0px;
    corner-top-right-radius: 4px;
    corner-top-left-radius: 4px;
}

button-group.vertical > :last-child {
    corner-radius: 0px;
    corner-bottom-right-radius: 4px;
    corner-bottom-left-radius: 4px;
}

button-group.accent {
    gap: 1px;
}

/* CHECKBOX */

checkbox {
    corner-radius: 2px;
    border-width: 1px;
    border-color: #888;
    background-color: #1d1d1d;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

checkbox:hover {
    border-color: #51afef;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

checkbox:checked {
    background-color: #51afef;
    border-color: #51afef;
    color: #181818;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

checkbox:disabled {
    border-color: #404040;
    transition: border-color 100ms;
}

checkbox:hover:disabled {
    background-color: transparent;
    transition: border-color 100ms;
}

checkbox:checked:hover {
    background-color: #80caff;
    border-color: #80caff;
    color: #181818;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

checkbox:checked:disabled {
    background-color: #404040;
    border-color: #404040;
    color: #181818;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

checkbox.intermediate {
    background-color: #51afef;
    border-color: #51afef;
    color: #181818;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

/* CHIP */

chip {
    corner-radius: 50%;
    background-color: #888888;
}

chip.outline {
    border-width: 1px;
    border-color: #888888;
    background-color: transparent;
}

chip .close-icon {
    background-color: #70707000;
    transition: background-color 100ms;
    corner-radius: 50%;
}

chip .close-icon:hover {
    background-color: #707070;
    transition: background-color 100ms;
}

chip:disabled .icon {
    background-color: transparent;
}

/* COMBOBOX */

combobox {
    corner-radius: 4px;
    background-color: #1d1d1d;
}

combobox .title {
    border-width: 1px;
    border-color: #888;
    corner-radius: 4px;
}

combobox > textbox > label.placeholder {
    color: #fafafa;
}

combobox list list-item {
    cursor: hand;
}

combobox .list label.nav {
    background-color: #51afef34;
}

combobox .list label:checked {
    background-color: #51afef;
}

/* DATEPICKER */

datepicker {
    background-color: #343434;
    corner-radius: 4px;
}

.datepicker-header textbox {
    background-color: transparent;
}

.datepicker-divisor {
    background-color: #2f2f2f;
}

.datepicker-calendar-day {
    color: #888;
    cursor: hand;
}

.datepicker-calendar-day:checked {
    color: #181818;
    background-color: #51afef;
    corner-radius: 4px;
}

.datepicker-calendar-day-disabled {
    color: #585858;
    cursor: arrow;
}

.datepicker-selected-date {
    color: #b0b0b0;
}

/* DIVIDER */

divider > .divider-line {
    background-color: #565656;
}

/* DROPDOWN */

dropdown {
    background-color: #343434;
    corner-radius: 4px;
}

dropdown list label {
    cursor: hand;
}

dropdown list label:hover {
    background-color: #51afef34;
}

dropdown list label:checked {
    background-color: #51afef;
}

/* ICON */
icon:disabled {
    color: #585858;
}

/* KNOB */

knob {
    background-color: #202020;
}

knob .knob-track {
    color: #51afef;
}

knob:disabled .knob-track {
    color: #404040;
}

.knob-head {
    background-color: #343434;
    border-width: 2px;
    border-color: #1d1d1d;
}

knob:disabled .knob-head {
    background-color: #404040;
}

knob .knob-tick {
    background-color: #888;
    corner-radius: 1px;
}

knob:disabled .knob-tick {
    background-color: #404040;
}

/* LABEL */

label:disabled {
    color: #585858;
}

label.describing {
    cursor: hand;
}

/* LIST */

list label.dark,
virtual-list label.dark {
    background-color: #00000015;
}

list.selectable list-item,
virtual-list.selectable list-item {
    background-color: transparent;
}

list.selectable list-item.focused,
virtual-list.selectable list-item.focused {
    background-color: #a3a3a3;
}

list.selectable list-item:hover,
virtual-list.selectable list-item:hover {
    background-color: #7b7bff;
}

list.selectable list-item:checked,
virtual-list.selectable list-item:checked {
    background-color: #51afef;
}

/* MENU */

menubutton {
    background-color: #343434;
    corner-radius: 4px;
}

menubutton:focus {
    background-color: #404040;
}

menubutton:hover {
    background-color: #404040;
}

menubutton:disabled {
    background-color: transparent;
}

menubutton .shortcut {
    color: #c4c4c4;
    font-size: 12px;
}

menubutton svg {
    fill: #c4c4c4;
}

submenu svg {
    fill: #f1f1f1;
}

submenu {
    background-color: #343434;
    corner-radius: 4px;
}

menubar submenu {
    background-color: transparent;
}

submenu:checked {
    background-color: #404040;
}

submenu:focus {
    background-color: #404040;
}

submenu:hover {
    background-color: #404040;
}

submenu:disabled {
    background-color: transparent;
}

submenu > popup {
    padding: 8px;
}

/* NOTIFICATION */

notification {
    background-color: #262626;
    padding: 8px;
    corner-radius: 4px;
    shadow: 0px 2px 16px #00000038;
}

/* PICKLIST */

picklist {
    corner-radius: 4px;
}

picklist:focus-visible {
    outline-width: 1px;
    outline-color: #51afef;
    outline-offset: 3px;
}

picklist list list-item {
    cursor: hand;
}

picklist list.selectable list-item .focus-indicator {
    width: 2px;
    position-type: absolute;
    background-color: #51afef;
    visibility: hidden;
}

picklist list.selectable list-item:focus-visible .focus-indicator {
    visibility: visible;
}

picklist list.selectable list-item:checked {
    background-color: transparent;
}

picklist list.selectable list-item .checkmark {
    fill: #51afef;
    visibility: hidden;
}

picklist list.selectable list-item:checked .checkmark {
    visibility: visible;
}

picklist list.selectable list-item:hover {
    background-color: #404040;
}

picklist list.selectable list-item:focus-visible {
    background-color: #404040;
    outline-color: transparent;
}

/* POPUP */

popup {
    background-color: #343434;
    corner-radius: 4px;
    shadow: 0px 2px 16px #00000038;
}

/* PROGRESS BAR */

progressbar {
    corner-radius: 50%;
    background-color: #262626;
    overflow: hidden;
}

progressbar:disabled {
    background-color: #404040;
}

progressbar .progressbar-bar {
    background-color: #51afef;
}

progressbar:disabled .progressbar-bar {
    background-color: #418abb;
}

/* RADIOBUTTON */

radiobutton {
    border-width: 2px;
    corner-radius: 50%;
    border-color: #888;
    background-color: transparent;
    transition: background-color 100ms;
    transition: border-color 100ms;
}

radiobutton:hover {
    border-color: #51afef;
    transition: border-color 100ms;
}

radiobutton:focus-visible {
    outline-width: 1px;
    outline-color: #51afef80;
    outline-offset: 3px;
}

radiobutton:checked {
    border-color: #51afef;
    transition: border-color 100ms;
}

radiobutton:checked:hover {
    border-color: #80caff;
    transition: border-color 100ms;
}

radiobutton:checked:disabled,
radiobutton:disabled {
    border-color: #404040;
    transition: border-color 100ms;
}

radiobutton .inner {
    corner-radius: 50%;
    background-color: #888;
    scale: 0;
    transition: scale 100ms;
    transition: background-color 100ms;
}

radiobutton:checked .inner {
    background-color: #51afef;
    scale: 1;
    transition: scale 100ms;
    transition: background-color 100ms;
}

radiobutton:hover .inner {
    background-color: #80caff;
    transition: background-color 100ms;
}

radiobutton:disabled .inner {
    background-color: #404040;
    transition: background-color 100ms;
    scale: 1;
    transition: scale 100ms;
}

/* RATING */

rating svg {
    fill: #484848;
    font-size: x-large;
    width: 20px;
    height: 20px;
    cursor: hand;
}

rating svg:checked {
    fill: gold;
}

rating:over svg:enabled {
    fill: #484848;
}

rating:over > svg.foo:enabled {
    fill: gold;
}

rating svg:hover {
    scale: 1.2;
    transition: scale 100ms;
}

rating svg:disabled {
    fill: #404040;
    scale: 1;
}

rating svg:checked:disabled {
    fill: #3c3826;
}

/* SCROLLVIEW */

scrollview > scrollbar {
    display: none;
}

scrollview.h-scroll > scrollbar,
scrollview.v-scroll > scrollbar {
    display: flex;
}

scrollbar {
    background-color: transparent;
}

scrollbar .thumb {
    background-color: #565656;
    corner-radius: 50%;
    opacity: 0;
    transition: opacity 200ms 0s linear;
}

scrollview.h-scroll:hover > scrollbar.horizontal > .thumb,
scrollview.v-scroll:hover > scrollbar.vertical > .thumb {
    background-color: #565656;
    opacity: 1;
    transition: opacity 200ms 0s linear;
}

scrollview.h-scroll:active > scrollbar.horizontal > .thumb,
scrollview.v-scroll:active > scrollbar.vertical > .thumb {
    background-color: #626262;
    opacity: 1;
    transition: opacity 200ms 0s linear;
}

scrollview.h-scroll > scrollbar.horizontal:active > .thumb,
scrollview.v-scroll > scrollbar.vertical:active > .thumb {
    background-color: #626262;
    opacity: 1;
    transition: opacity 200ms 0s linear;
}

/* SLIDER */

slider {
    corner-radius: 2px;
}

slider:focus-visible {
    outline-width: 1px;
    outline-color: #51afef80;
    outline-offset: 3px;
    corner-radius: 4px;
}

slider .track {
    background-color: #51afef20;
    corner-radius: 2px;
}

slider .active {
    background-color: #51afef80;
    corner-radius: 2px;
}

slider .thumb {
    background-color: #51afef;
    corner-radius: 50%;
}

slider .thumb:hover {
    background-color: #80caff;
}

slider:disabled {
    background-color: #404040;
}

slider:disabled .active {
    background-color: #404040;
}

slider:disabled .thumb {
    background-color: #404040;
}

/* SPINBOX */

spinbox {
    background-color: #343434;
    corner-radius: 4px;
}

spinbox .spinbox-button {
    cursor: hand;
}

spinbox .spinbox-button:hover {
    color: #ffffff;
}

spinbox .spinbox-value {
    color: #ffffff;
}

spinbox textbox.spinbox-value {
    background-color: transparent;
    border-width: 0px;
    corner-radius: 0px;
}

spinbox picklist.spinbox-value dropdown {
    background-color: transparent;
    border-width: 0px;
}

spinbox picklist.spinbox-value {
    background-color: transparent;
    border-width: 0px;
    horizontal-gap: 4px;
}

/* SWITCH */

switch .switch-handle-bg {
    corner-radius: 6px;
    background-color: #343434;
    transition: background-color 100ms;
}

switch .switch-handle {
    background-color: #888888;
    corner-radius: 50%;
    transition: background-color 100ms;
    transition: left 100ms;
}

switch:hover .switch-handle {
    background-color: #b5b5b5;
    transition: background-color 100ms;
}

switch:focus-visible {
    outline-width: 1px;
    outline-color: #51afef80;
    outline-offset: 3px;
}

switch:checked .switch-handle-bg {
    background-color: #51afef40;
    transition: background-color 100ms;
}

switch:checked .switch-handle {
    background-color: #51afef;
    transition: background-color 100ms;
}

switch:checked:hover .switch-handle {
    background-color: #80caff;
    transition: background-color 100ms;
}

switch:disabled * {
    background-color: #404040;
    transition: background-color 100ms;
}

switch:hover:disabled * {
    background-color: #404040;
    transition: background-color 100ms;
}

switch:checked:disabled * {
    background-color: #404040;
    transition: background-color 100ms;
}

switch:checked:hover:disabled * {
    background-color: #404040;
    transition: background-color 100ms;
}

/* TABVIEW */

tabheader:disabled {
    background-color: transparent;
}

tabheader:checked .indicator {
    background-color: #51afef;
}

tabview .tabview-divider {
    background-color: #565656;
}

/* TEXTBOX */

textbox {
    border-width: 1px;
    corner-radius: 4px;
    border-color: #888;
    background-color: #1d1d1d;
    transition: border-color 100ms;
    transition: background-color 100ms;
}

textbox:checked {
    border-color: #51afef;
    background-color: #1d1d1d;
    transition: border-color 100ms;
}

textbox:checked.caret {
    caret-color: #c4c4c4;
}

textbox > label.placeholder {
    caret-color: transparent;
    color: #888;
}

textbox:read-only {
    background-color: transparent;
    border-width: 0px;
}

textbox:disabled {
    color: #585858;
    transition: color 100ms;
}

textbox:focus-visible {
    border-color: #51afef80;
    transition: border-color 100ms;
}

textbox:invalid {
    border-color: #ef5151;
    border-width: 1px;
    transition: border-color 100ms;
    background-color: #3c2c2c;
}

/* TOGGLE BUTTON */

toggle-button {
    corner-radius: 4px;
    background-color: #343434;
    transition: background-color 100ms;
}

toggle-button:hover {
    background-color: #404040;
    transition: background-color 100ms;
}

toggle-button:active {
    background-color: #303030;
}

toggle-button:checked {
    background-color: #1d1d1d;
    transition: background-color 100ms;
}

toggle-button:disabled {
    color: #626262;
    background-color: #404040;
    transition: background-color 100ms;
}

toggle-button svg {
    fill: #f1f1f1;
}

/* TOOLTIP */
tooltip {
    padding: 4px;
    background-color: #888;
    corner-radius: 4px;
}

tooltip arrow {
    background-color: #888;
}

/* VIRTUAL LIST */

virtual-list label.dark {
    background-color: #00000015;
}

/* XY PAD */

xypad {
    border-color: #ffffff;
}

xypad .thumb {
    border-color: #ffffff;
}

xypad:disabled {
    background-color: #323232;
}

collapsible {
    background-color: #404040;
    shadow: 0px 2px 2px #00000038;
}

collapsible > .header > .expand-icon {
    fill: #979797;
}
